<template>
    <div>
        <div class="public-title">成员数量</div>
        <Badge text="+1">
            <Card class="money-item">
                <div style="text-align:center">
                    <h3>2</h3>
                    <span>总人数</span>
                    <!-- <img src="../../../assets/img/mange/yue4.png"> -->
                </div>
            </Card>
        </Badge>
        <div class="public-title">成员列表</div>
        <div class="member-main">
            <div class="crm-list">
                <Card style="width:158px" @click.native="value4 = true">
                    <div style="text-align:center">
                        <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                        <h5>王鹏</h5>
                        <h4>山东 济南</h4>
                    </div>
                </Card>
                <Card style="width:158px" @click.native="value4 = true">
                    <div style="text-align:center">
                        <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                        <h5>王鹏</h5>
                        <h4>山东 济南</h4>
                    </div>
                </Card>
                <Card style="width:158px" @click.native="value4 = true">
                    <div style="text-align:center">
                        <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                        <h5>王鹏</h5>
                        <h4>山东 济南</h4>
                    </div>
                </Card>

            </div>
            <Drawer width="640" v-model="value4">
                <p :style="pStyle">成员信息</p>
                <p :style="pStyle">基本资料</p>
                <div class="demo-drawer-profile">
                    <Row>
                        <Col span="12">
                        姓名: 贤心
                        </Col>
                        <Col span="12">
                        手机: 18769526199
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                        地区: 山东济南
                        </Col>
                        <Col span="12">
                        工号: 380380380
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                        职业证书编号: <a target="_blank" href="http://iir.circ.gov.cn/web/">12358564785212565</a>
                        </Col>
                        <Col span="12">
                        所属公司:中国平安保险
                        </Col>
                    </Row>
                    <Row>
                        <Col span="18">
                        介绍: 巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙
                        </Col>
                    </Row>
                </div>
                <Divider />
                <p :style="pStyle">业务信息</p>
                <Row>
                    <Col span="12">
                    历史接单/点单：<a>825/485</a>
                    </Col>
                    <Col span="12">
                    今日接单/点单：<a>825/485</a>
                    </Col>
                </Row>
                <Divider />
                <p :style="pStyle">成员操作</p>
                <Button size="large" type="info">指定团队明星</Button>
                <Button size="large" type="warning">删除成员</Button>
                <Divider />
                <p :style="pStyle">发送通知</p>
                <Input v-model="msgVal" type="textarea" :rows="4" placeholder=" 输入通知内容..." />
                <br><br>
                <Button size="large" type="info">发送</Button>
                <Divider />
            </Drawer>
        </div>
        <div class="public-title">申请通知</div>
        <Table border :columns="columns7" :data="data6"></Table>

    </div>
</template>

<script>
export default {
  data() {
    return {
      value4: false,
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px"
      },
      msgVal: "", //通知内容
      columns7: [
        {
          title: "姓名",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          title: "地区",
          key: "area"
        },
        {
          title: "证书编号",
          key: "certificate"
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "同意"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "拒绝"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          name: "John Brown",
          certificate: 22365821012026,
          area: "New York No. 1 Lake Park"
        },
        {
          name: "Jim Green",
          certificate: 22365821012026,
          area: "London No. 1 Lake Park"
        },
        {
          name: "Joe Black",
          certificate: 22365821012026,
          area: "Sydney No. 1 Lake Park"
        },
        {
          name: "Jon Snow",
          certificate: 22365821012026,
          area: "Ottawa No. 2 Lake Park"
        }
      ]
    };
  },
  methods: {
    show(index) {
      this.$Modal.confirm({
        title: "User Info",
        content: `Name：${this.data6[index].name}<br>Age：${
          this.data6[index].age
        }<br>Address：${this.data6[index].address}`
      });
    },
    remove(index) {
      this.data6.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.money-item {
  width: 100px;
  display: inline-block;
  margin-left: 20px;
}
.money-item img {
  width: 50%;
}
/* .crm-list  */
.crm-list {
  display: flex;
  flex-wrap: wrap;
}
.crm-list .ivu-card {
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.crm-list .default-head {
  border-radius: 50%;
  width: 65px;
}
.crm-list h5,
.crm-list h4 {
  cursor: pointer;
}
.demo-drawer-profile {
  font-size: 14px;
}
.demo-drawer-profile .ivu-col {
  margin-bottom: 12px;
}
</style>